<template>
	<div 
		class="element-chip"
		:title="element.textContent || element.originalElement"
	>
		<span class="chip-tag">{{ extractTagFromSelector(element.selector) }}</span>
		<span class="chip-class" v-if="extractClassFromSelector(element.selector)">{{ extractClassFromSelector(element.selector) }}</span>
		<span class="chip-content">{{ truncateText(element.textContent || element.originalElement, 20) }}</span>
	</div>
</template>

<script setup lang="ts">
// 定义元素信息接口
interface ElementInfo {
	selector: string
	textContent?: string
	originalElement?: string
}

// 定义组件属性
interface Props {
	element: ElementInfo
}

// 接收属性
defineProps<Props>()

// 文本截断函数
const truncateText = (text: string, maxLength: number): string => {
	if (!text) return ''
	if (text.length <= maxLength) return text
	return text.substring(0, maxLength) + '...'
}

// 从选择器中提取标签名
const extractTagFromSelector = (selector?: string): string => {
	if (!selector) return ''
	// 提取标签名（如 h1.site-title 中的 h1）
	const tagMatch = selector.match(/^([a-zA-Z][a-zA-Z0-9]*)/)
	return tagMatch ? tagMatch[1] : ''
}

// 从选择器中提取类名
const extractClassFromSelector = (selector?: string): string => {
	if (!selector) return ''
	// 提取类名（如 h1.site-title 中的 site-title）
	const classMatch = selector.match(/\.([a-zA-Z][a-zA-Z0-9-_]*)/)
	return classMatch ? classMatch[1] : ''
}
</script>

<style lang="scss" scoped>
.element-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: white;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.15s ease;
	width: 100%;
	position: relative;
	min-height: 32px;
	
	&:hover {
		background: #f8f9fa;
		border-color: #1890ff;
		box-shadow: 0 1px 4px rgba(24, 144, 255, 0.1);
	}
	
	.chip-tag {
		color: #1890ff;
		font-weight: 600;
		font-size: 12px;
		text-transform: uppercase;
		padding: 2px 6px;
		background: rgba(24, 144, 255, 0.08);
		border-radius: 2px;
		letter-spacing: 0.2px;
		flex-shrink: 0;
	}
	
	.chip-class {
		color: #f5222d;
		font-weight: 500;
		font-size: 12px;
		padding: 2px 6px;
		background: rgba(245, 34, 45, 0.08);
		border-radius: 2px;
		flex-shrink: 0;
		&:before {
			content: '.';
			font-weight: 600;
		}
	}
	
	.chip-content {
		color: #666;
		font-size: 13px;
		font-weight: 400;
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
	}
}
</style>